<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initiai-scale=1.0">
	<title>百度一下，你就知道</title>
	<style type="text/css">
		body{
			font: 12px arial;
		}
		ul{ 
			margin:0px; 
			padding:0px; 
			list-style-type:none; 
		} 
		.topright{
		}
		.put{
			color: #333;
			font-size: 13px;
			font-weight: bold;
			margin: 5px;

		}
		.denglu{
			color: #333;
			margin: 5px;
		}
		#setting{
			margin:0px; 
			width:80px; 
			height:25px; 
			color:#333; 
			text-align:center; 
			line-height:25px; 
			cursor:pointer; 
			border:1px solid white; 
			margin: 5px;
		}
		#submenu li{
			width:80px; 
			height:25px; 
			color:#333; 
			text-align:center; 
			line-height:25px; 
			cursor:pointer; 
			background:white; 
			border:1px solid #333; 
		}
		.more{
			background-color: #38f;
			border: 0px;
			height: 60px;
			width: 80px;
			color: #fff;
			position: relative;
		}
		#logo{
			margin-top: 92px;
			width: 270px;
			height: 129px;
		}
		#search{
			width: 530px;
			height: 30px;
			padding-right: 0;
		}
		
		#inp1{
			text-align: -webkit-center;
			display: block;
		}
		#bd{
			background: #38f;
  			border: 0;    
  			height: 35px;
  			width: 100px;
  			color: #fff;
  			font-size: 15px;
		}
		/*.last{
			盒子居中
			display: -webkit-box;
			-webkit-box-orient:vertical;
			-webkit-box-pack:center;
			text-align: center;
			margin: auto;
		}*/
		#lastOne{
			height:50px;
			position:absolute;
			bottom:47px;
			width:100%;
			margin:0 auto;
			z-index:0;
			overflow:hidden
			color:#999;
			display: block;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 0px;
			-webkit-margin-end: 0px;
		}
		.lastTwo{
			overflow:hidden;
			margin:0 auto;
			text-align:center;
			*width:640px;
			color:#999;
			line-height: 22px;
			margin-left: 25px

		}
		.down{
			color: #999;
			 cursor: auto;
			text-decoration: underline;
		}

	</style>
</head>
<body>
	<!-- 顶部栏设置 -->
	<div align="right">
		<span class="topright">
			<a href="" class="put">新闻</a>
			<a href="" class="put">hao123</a>
			<a href="" class="put">地图</a>
			<a href="" class="put">视频</a>
			<a href="" class="put">贴吧</a>
			<a href="" class="put">学术</a>
			<a href="" class="denglu">登录</a>
			<a href="" id="setting">设置</a>
			<ul id="submenu">
				<li class="JD">搜索设置</li>
				<li class="JD">高级搜索</li>
				<li class="JD">关闭预测</li>
				<li class="JD">搜索历史</li>
			</ul>
			<span class="more">
				更多产品
			</span>
		</span>
	</div> 

	<!-- 图片设置 -->
	<div align="center" class="img">
		<img src="https://www.baidu.com/img/bd_logo1.png" id="logo">
	</div>

	<!-- 搜索框设置 -->
	<div align="center" id="inp1">
		<input type="text" name="search" id="search" value>
		<input type="submit" value="百度一下" id="bd">
	</div>

	<div id="lastOne">
		<div class="lastTwo">
			
		
		<span>
			<a href="" class="down">把百度设为主页</a>		
		</span>
		<span>
			<a href="" class="down">关于百度</a>
		</span>
		<span>
			<a href="" class="down">About Baidu</a> 
		</span>
		<span>
			<a href="" class="down">百度推广</a>
		</span>
		<p>
			©2018 Baidu 
			<span>
				<a href="" class="down">使用百度前必读</a>
			</span>
			<span>
				<a href="" class="down">意见反馈</a>
			</span>
			  京ICP证030173号
		</p>
	</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#submenu').hide();
		});
		$('#setting').hover(function() {
			$('#submenu').show();

		}, function() {
			$('#submenu').hide();
		});
		$('#submenu').hover(function() {
			$('#submenu').show();
		}, function() {
			$('#submenu').hide();
		});
	</script>
</body>
</html>



